<template>
  <div class="login-panel">
    <div class="title">权权管理系统</div>
    <el-tabs type="border-card" stretch v-model="currentTab">
      <el-tab-pane name="account">
        <template #label>
          <span>
            <el-icon><Avatar /></el-icon>
            账号登陆
          </span>
        </template>
        <login-account ref="accountRef"></login-account>
      </el-tab-pane>
      <el-tab-pane name="phone">
        <template #label>
          <span>
            <el-icon><Cellphone /></el-icon>
            手机号登陆
          </span>
        </template>
        <login-phone ref="phoneRef"></login-phone>
      </el-tab-pane>
    </el-tabs>
    <div class="loginControl">
      <el-checkbox v-model="isRememberPassword">记住密码</el-checkbox>
      <el-link href="https://element.eleme.io" :underline="false"
        >忘记密码</el-link
      >
    </div>
    <div class="loginClick">
      <el-button type="primary" class="loginClickBtn" @click="handleLoginClick"
        >立即登录</el-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { loginAccount, loginPhone } from './index';
import { ref } from 'vue';
const isRememberPassword = ref(true);
const accountRef = ref<InstanceType<typeof loginAccount>>();
const phoneRef = ref<InstanceType<typeof loginPhone>>();
const currentTab = ref('account');
const handleLoginClick = () => {
  if (currentTab.value == 'account') {
    accountRef.value?.loginAction(isRememberPassword.value);
  } else if (currentTab.value == 'phone') {
    phoneRef.value?.loginAction(isRememberPassword.value);
  }
};
</script>

<style scoped lang="less">
.login-panel {
  margin-bottom: 150px;
  width: 320px;
  text-align: center;
  .title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .loginControl {
    display: flex;
    justify-content: space-between;
  }
  .loginClick {
    width: 100%;
    .loginClickBtn {
      width: 100%;
    }
  }
}
</style>
